import React from 'react';
import { observer } from 'mobx-react';
import PropTypes from 'prop-types';
import css from './index.less';

@observer
export default class FramePolygonRender extends React.Component {

  static propTypes = {
    mod: PropTypes.object.isRequired,
    onClick: PropTypes.func,
  };

  static defaultProps = {
    onClick: (e) => {
      // e.stopPropagation();
    },
  };

  renderSvg(ind, arr) {
    const { width, height, background, borderWidth, strokeColor, dashArray } = this.props.mod;
    let dd = '';
    arr.forEach( (item, index) => {
      if (index === 0) {
        dd += 'M' + item + ' ';
      } else if (index !== 0 && index % 2 === 0) {
        dd += 'L' + item + ' ';
      } else {
        dd += item + ' ';
      }
    });
    dd = dd + 'Z';

    return (
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width={width} height={height} key={ind}>
        <path d={dd} fill={background} strokeWidth = {borderWidth} stroke={strokeColor}
              strokeDasharray={dashArray}/>
      </svg>
    );
  }

  render() {
    const { mod, ...other } = this.props;
    const { side, width, height, } = mod;

    const props = {
      className: css.polygon,
      style: mod.style,
      ...other,
    };

    // 点的顺序是左下角顺时针
    const pathD = [
      // [
      //   (width / 2) * (1 - Math.sin( Math.PI / 3)), (height / 2) * (1 + Math.cos( Math.PI / 3)),
      //   width / 2, 0,
      //   (width / 2) * (1 + Math.sin( Math.PI / 3)), (height / 2) * (1 + Math.cos( Math.PI / 3)),
      // ], // 不内接的三角形，不一定为正
      // [
      //   0, width * Math.cos(Math.PI / 6),
      //   width / 2, 0,
      //   width, width * Math.cos(Math.PI / 6),
      // ], // 内接三角形，一定为正
      [
        0, height / 2 + height / (2 * Math.tan(Math.PI / 3)),
        width / 2, 0,
        width, height / 2 + height / (2 * Math.tan(Math.PI / 3)),
      ], // 内接三角形，不一定为正
      [
        0, 0, width, 0,
        width, height, 0, height,
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 5)), (height / 2) * (1 + Math.cos( Math.PI / 5)),
        (width / 2) * (1 - Math.cos( Math.PI / 10)), (height / 2) * (1 - Math.sin( Math.PI / 10)),
        width / 2, 0,
        (width / 2) * (1 + Math.cos( Math.PI / 10)), (height / 2) * (1 - Math.sin( Math.PI / 10)),
        (width / 2) * (1 + Math.sin( Math.PI / 5)), (height / 2) * (1 + Math.cos( Math.PI / 5)),
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 6)), (height / 2) * (1 + Math.cos( Math.PI / 6)),
        0, height / 2,
        (width / 2) * (1 - Math.sin( Math.PI / 6)), (height / 2) * (1 - Math.cos( Math.PI / 6)),
        (width / 2) * (1 + Math.sin( Math.PI / 6)), (height / 2) * (1 - Math.cos( Math.PI / 6)),
        width, height / 2,
        (width / 2) * (1 + Math.sin( Math.PI / 6)), (height / 2) * (1 + Math.cos( Math.PI / 6)),
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 7)), (height / 2) * (1 + Math.cos( Math.PI / 7)),
        (width / 2) * (1 - Math.sin( Math.PI * 3 / 7)), (height / 2) * (1 + Math.cos( Math.PI * 3 / 7)),
        (width / 2) * (1 - Math.sin( Math.PI * 2 / 7)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 7)),
        width / 2, 0,
        (width / 2) * (1 + Math.sin( Math.PI * 2 / 7)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 7)),
        (width / 2) * (1 + Math.sin( Math.PI * 3 / 7)), (height / 2) * (1 + Math.cos( Math.PI * 3 / 7)),
        (width / 2) * (1 + Math.sin( Math.PI / 7)), (height / 2) * (1 + Math.cos( Math.PI / 7)),
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 4)), (height / 2) * (1 + Math.cos( Math.PI / 4)),
        0, height / 2,
        (width / 2) * (1 - Math.sin( Math.PI / 4)), (height / 2) * (1 - Math.cos( Math.PI / 4)),
        width / 2, 0,
        (width / 2) * (1 + Math.sin( Math.PI / 4)), (height / 2) * (1 - Math.cos( Math.PI / 4)),
        width, height / 2,
        (width / 2) * (1 + Math.sin( Math.PI / 4)), (height / 2) * (1 + Math.cos( Math.PI / 4)),
        width / 2, height,
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 9)), (height / 2) * (1 + Math.cos( Math.PI / 9)),
        (width / 2) * (1 - Math.sin( Math.PI * 3 / 9)), (height / 2) * (1 + Math.cos( Math.PI * 3 / 9)),
        (width / 2) * (1 - Math.sin( Math.PI * 4 / 9)), (height / 2) * (1 - Math.cos( Math.PI * 4 / 9)),
        (width / 2) * (1 - Math.sin( Math.PI * 2 / 9)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 9)),
        width / 2, 0,
        (width / 2) * (1 + Math.sin( Math.PI * 2 / 9)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 9)),
        (width / 2) * (1 + Math.sin( Math.PI * 4 / 9)), (height / 2) * (1 - Math.cos( Math.PI * 4 / 9)),
        (width / 2) * (1 + Math.sin( Math.PI * 3 / 9)), (height / 2) * (1 + Math.cos( Math.PI * 3 / 9)),
        (width / 2) * (1 + Math.sin( Math.PI / 9)), (height / 2) * (1 + Math.cos( Math.PI / 9)),
      ],
      [
        (width / 2) * (1 - Math.sin( Math.PI / 5)), (height / 2) * (1 + Math.cos( Math.PI / 5)),
        (width / 2) * (1 - Math.sin( Math.PI * 2 / 5)), (height / 2) * (1 + Math.cos( Math.PI * 2 / 5)),
        (width / 2) * (1 - Math.sin( Math.PI * 2 / 5)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 5)),
        (width / 2) * (1 - Math.sin( Math.PI / 5)), (height / 2) * (1 - Math.cos( Math.PI / 5)),
        width / 2, 0,
        (width / 2) * (1 + Math.sin( Math.PI / 5)), (height / 2) * (1 - Math.cos( Math.PI / 5)),
        (width / 2) * (1 + Math.sin( Math.PI * 2 / 5)), (height / 2) * (1 - Math.cos( Math.PI * 2 / 5)),
        (width / 2) * (1 + Math.sin( Math.PI * 2 / 5)), (height / 2) * (1 + Math.cos( Math.PI * 2 / 5)),
        (width / 2) * (1 + Math.sin( Math.PI / 5)), (height / 2) * (1 + Math.cos( Math.PI / 5)),
        width / 2, height,
      ],
    ];

    return (
      <div {...props}>
        {
          pathD.map((item, index) => {
            return ( side - 3 === index && this.renderSvg(index, item));
          })
        }
      </div>
    );
  }
}
